<template>
	<view class="content">
        <u-navbar bgColor="#fff" :fixed="true" :safeAreaInsetTop="true" :placeholder="true"
            leftIconColor="#151C24" @leftClick="back"
            title="统计分析" titleColor="#151C24">
        </u-navbar>
        <view class="uni-total-analyse subsection" >
            <u-subsection bgColor="#fff" fontSize="14" :list="tab" :current="current" @change="e=>current=e"></u-subsection>
        </view>


        <swiper :current="current" :disable-touch="false" @change="e=>current=e.detail.current"
            class="uni-area swiper"  :style="{height:swiperH+'px'}" >

            <!-- 人员 -->
            <swiper-item>
                <view class="u-m-t-50 swiper-item">
                    <text class="u-font-32 font-bold">综合统计</text>
                    <view class="u-m-t-30 uni-echarts-box uni-shadow u-p-b-30">
                        <qiun-title-bar title="工人情况"/>
                        <text class="u-font-26 uni-gery-color unit">单位：人</text>
                        <u-row class="u-flex u-flex-wrap">
                            <u-col span="3" v-for="(item,index) in workers" :key="index" class="u-m-t-24">
                                <text class="u-text-center u-font-24 uni-dec-color">{{item.title}}</text>
                                <text class="u-m-t-14 u-text-center u-font-42 font-bold">{{item.value}}</text>
                            </u-col>
                        </u-row>
                    </view>
                    <view class="u-m-t-30 uni-echarts-box uni-shadow u-p-b-30">
                        <qiun-title-bar title="工人分布情况" />
                        <text class="u-font-26 uni-gery-color unit">单位: 人</text>
                        <view class="u-m-t-20" style="height:520rpx">
                            <qiun-data-charts type="column" :opts="{extra:{column:{width:16}}}" :chartData="workerFenbu" />
                        </view>
                    </view>
                </view>
            </swiper-item>

            <!-- 考勤 -->
            <swiper-item>
                <view class="u-m-t-50 swiper-item">
                    <text class="u-font-32 font-bold">综合统计</text>
                    <view class="u-m-t-30 uni-shadow">
                        <view class="u-flex">
                            <view class="uni-line"></view>
                            <text class="u-m-l-20 font-bold uni-higt-color">今日考勤</text>
                        </view>
                        <u-row class="u-flex u-flex-wrap">
                            <u-col span="6" v-for="(item,index) in kaoqins" :key="index"
                                class="u-col-top u-m-t-40" style="flex-direction:row">
                                <u--image class="u-m-r-30" :src="item.icon" width="62rpx" height="62rpx"></u--image>
                                <view class="u-flex u-flex-col u-col-top">
                                    <text class="u-font-48 font-bold">{{item.value}}</text>
                                    <!-- <text v-if="index==2" class="u-font-28">%</text> -->
                                    <text class="u-m-t-10 u-font-24 uni-dec-color">{{item.title}}</text>
                                </view>
                            </u-col>
                        </u-row>
                    </view>
                </view>
            </swiper-item>

            <!-- 工资 -->
            <swiper-item>
                <view class="u-m-t-50 swiper-item">
                    <view class="uni-shadow u-p-l-10 u-p-t-10 uni-echarts-box">
                        <qiun-title-bar title="工资发放情况"/>
                        <view class="u-m-t-20" style="height:520rpx">
                            <qiun-data-charts type="line" :opts="monthWageFafangData.opts" :chartData="monthWageFafangData" />
                        </view>
                    </view>
                </view>
            </swiper-item>

            <!-- 预警 -->
            <swiper-item v-if="false">
                <view class="u-m-t-50 swiper-item">
                    <text class="u-font-32 font-bold">预警情况统计</text>
                    <view class="u-m-t-30 uni-shadow">
                        <u-row>
                            <u-col v-for="(item,index) in warnings" :key="index"
                                :class="[index==0?'border':'']"
                                span="6" style="flex-direction:row; justify-content:center;">
                                <u--image :src="item.icon" width="80rpx" height="80rpx" shape="circle"></u--image>
                                <view class="u-m-l-20 u-felx u-flex-col">
                                    <text class="u-font-42 font-bold">{{item.value}}</text>
                                    <text class="u-m-t-6 u-font-24 uni-dec-color">{{item.title}}</text>
                                </view>
                            </u-col>
                        </u-row>
                    </view>
                    <!-- 预警类型统计 -->
                    <view class="u-m-t-30 uni-shadow u-p-l-10 u-p-t-10 uni-echarts-box">
                        <text class="u-font-26 uni-gery-color unit">单位：个</text>
                        <view class="u-p-t-100" style="height:620rpx">
                            <qiun-data-charts type="pie" 
                                :opts="{legend:{position:'bottom',lineHeight:20}}" 
                                :chartData="warningEcharts" />
                        </view>
                    </view>
                </view>
            </swiper-item>

            <!-- 督办 -->
            <swiper-item v-if="false">
                <view class="u-m-t-50 swiper-item uni-shadow u-p-l-10 u-p-t-10">
                    <qiun-title-bar title="督办"/>
                    <u-row class="u-flex u-flex-wrap">
                        <u-col span="3" v-for="(item,index) in duBans" :key="index" class="u-m-t-24">
                            <text class="u-text-center u-font-24 uni-dec-color">{{item.title}}</text>
                            <view class="u-m-t-14 u-text-center u-col-bottom">
                                <text class="u-font-42 font-bold">{{item.value}}</text>
                                <text class="u-font-24">个</text>
                            </view>
                        </u-col>
                    </u-row>
                </view>
                <view v-if="1==2" class="u-m-t-50 swiper-item uni-shadow u-flex u-row-center u-flex-col">
                    <u--image :showLoading="true" src="/static/icons/no.png" width="241rpx" height="241rpx"></u--image>
                    <view class="u-flex u-row-center">
                        <u-icon name="info-circle" size="24" class="u-m-r-20" color="#4E5C70"></u-icon>
                        <text class="u-font-32">暂无数据源</text>
                    </view>
                </view>
            </swiper-item>
        </swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                systemInfo: uni.getStorageSync('systemInfo'),
                swiperH: 731,
                parameter:{
                    deptId: uni.getStorageSync("userInfo").deptId, // 所属部门编号
                    gcbh: uni.getStorageSync("userInfo").ssgcbh // 所属项目(工程)编号
                },
				// tab:['人员','考勤','工资','预警','督办'],
				tab:['人员','考勤','工资'],
                current: 0,
                // 工人情况
                workers:[ 
                    { field:'smzrs', title:'实名制人数', value: 0 },
                    { field:'istaffs', title:'进场工人数', value: 0 },
                    { field:'ostaffs', title:'离场工人数', value: 0 },
                    { field:'atdStaffs', title:'考勤工人数', value: 0 },
                ],
                // 工人分布情况
                workerFenbu:{
                    categories:[],
                    series:[
                        // {
                        //     name: "考勤人数",
                        //     data: []
                        // },
                        // {
                        //     name: "总人数",
                        //     data: []
                        // },
                    ]
                },
                // 今日考勤
                kaoqins:[
                    { field:'staffs', title:'考勤人数', icon:'/static/home/data5.png', value: 0 },
                    { field:'unatdStaffs', title:'缺勤人数', icon:'/static/home/data6.png', value: 0 },
                    { field:'atdRate', title:'考勤率', icon:'/static/home/data7.png', value: 0 },
                ],
                // 工资发放情况
                monthWageFafangData:{
                    categories: [],
                    series:[
                        {
                            index: 0, 
                            name: "发放金额",
                            data: []
                        },
                        {
                            index: 1,
                            name: "发放人数",
                            data: []
                        },
                    ],
                    opts:{
                        yAxis: {
                            showTitle:true,
                            data: [
                                {
                                    position: 'left',
                                    title: '发放金额(万元)',
                                    titleOffsetX: 15,
                                    titleOffsetY: -8,
                                }, 
                                {
                                    position: 'right',
                                    title: '发放人数(人)',
                                    titleOffsetX: -15,
                                    titleOffsetY: -8,
                                }
                            ]
                        },
                    },
                },
                // 预警情况统计
                warnings:[
                    { icon:'/static/icons/warn1.png',title:'本月预警', value: 0 },
                    { icon:'/static/icons/warn2.png',title:'累计预警', value: 0 },
                ],
                // 预警统计类型
                warningEcharts:{
                    series: [
                        {
                            data: [
                                // { name: "住建", value: 50 }
                            ],
                            format: 'totalWarn', // 数据格式化
                        }
                    ],
                },
                // 督办
                duBans:[
                    { filed:'zjxm', title:'在建项目', value: 0 },
                    { filed:'jrdb', title:'今日预警', value: 0 },
                    { filed:'bydb', title:'本月督办', value: 0 },
                    { filed:'lsdb', title:'今日督办', value: 0 },
                    { filed:'ydbxms_by', title:'已督办项目数', value: 0 },
                    { filed:'wdbxms_by', title:'未督办项目数', value: 0 },
                    { filed:'ydbxms_ls', title:'已督办项目数', value: 0 },
                    { filed:'wdbxms_ls', title:'未督办项目数', value: 0 },
                ],
			}
		},

        onReady(){
            uni.createSelectorQuery().in(this).select('.subsection').boundingClientRect(res => {
                this.swiperH = this.systemInfo.normalContentH - res.height
            }).exec();
        },


		onLoad() {
            // 工人情况
            this.getHomeSsu()
            // 工人分布
            this.getHomeAtdmonth()
            // 今日考勤
            this.getHomeToday()
            // 工资发放情况
            this.getTotalSalaryMonth()
            // 预警情况统计(暂时隐藏)
            // this.getWarnStatistics()
            // 预警类型统计(暂时隐藏)
            // this.getWarnChart()
            // 督办(暂时隐藏)
            // this.getDubanSupervise()
		},


		methods: {
            // 返回
            back(){
                uni.navigateBack()
            },


            // 工人情况
            getHomeSsu(){
                uni.showLoading({ title:'工人情况获取中' })
                this.$request(this,this.$apis.HomeSsu,this.parameter).then(res=>{
                    // console.log('工人情况',res)
                    this.workers.map((v,i)=>{
                        v.value = res[v.field]
                    })
                }).then()
            },
            // 工人分布
            getHomeAtdmonth(){
                uni.showLoading({ title:'工人分布' })
                this.$request(this,this.$apis.HomeAtdmonth, this.parameter).then(res=>{
                    // console.log('工人分布',res)
                    this.workerFenbu.categories = []
                    this.workerFenbu.series = [
                        { name: "实名制进场人数", data: [] },
                        { name: "考勤总人数", data: [] }
                    ] 
                    res.map((v,i)=>{
                        this.workerFenbu.categories.push(v.date)
                        this.workerFenbu.series[0].data.push(v.atdStaffs) // 实名制进场人数
                        this.workerFenbu.series[1].data.push(v.staffs) // 考勤总人数
                    })
                }).then()
            },

            // 今日考勤
            getHomeToday(){
                uni.showLoading({ title:'今日考勤获取中' })
                this.$request(this,this.$apis.HomeToday, this.parameter).then(res=>{
                    // console.log('今日考勤',res)
                    this.kaoqins.map((v,i)=>{
                        v.value = res[v.field]
                    })
                }).then()
            },

            // 工资发放情况
            getTotalSalaryMonth(){
                uni.showLoading({ title:'工资发放情况' })
                this.$request(this,this.$apis.TotalSalaryMonth, this.parameter).then(res=>{
                    // console.log('工资发放情况',res)
                    this.monthWageFafangData.categories = []
                    this.monthWageFafangData.series[0].data = []
                    this.monthWageFafangData.series[1].data = []
                    res.map((v,i)=>{
                        this.monthWageFafangData.categories.push(v.date)
                        this.monthWageFafangData.series[0].data.push(v.salary) // 发放金额
                        this.monthWageFafangData.series[1].data.push(v.staffs) // 发放人数
                    })
                }).then()
            },

            // 预警情况统计
            getWarnStatistics(){
                uni.showLoading({ title:'预警情况统计' })
                // // console.log('预警情况统计---参数',this.prameter)
                this.$request(this, this.$apis.WarnStatistics,this.prameter).then(res => {
                    // console.log('预警情况统计',res)
                    this.warnings[0].value = res.mvalue
                    this.warnings[1].value = res.value
                }).then()
            },
            // 预警类型统计
            getWarnChart(){
                uni.showLoading({ title:'预警类型统计' })
                // // console.log('预警类型统计---参数',this.prameter)
                this.$request(this, this.$apis.WarnChart,this.prameter).then(res => {
                    // console.log('预警类型统计',res)
                    this.warningEcharts.series[0].data = []
                    res.map((v,i)=>{
                        this.warningEcharts.series[0].data.push({
                            name: v.name,
                            value: v.value
                        })
                    })
                }).then()
            },

            // 督办
            getDubanSupervise(){
                uni.showLoading({ title:'预警督办' })
                // console.log('预警督办-参数',this.prameter)
                this.$request(this, this.$apis.DubanSupervise,this.prameter).then(res => {
                    // console.log('预警督办',res)
                    this.duBans.map((v,i)=>{
                        v.value = res[v.filed]
                    })
                }).then()
            },
		}
	}
</script>

<style lang="scss">
    .content{
        .subsection{
            padding: 0 30rpx;
            box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.05);
        }
        .border{
            border-right:1rpx solid #eee;
        }
    }
</style>
